<template>
  <div class="content">

    <div class="page-content">
      <div class="page-content-top">
        <Step :step="['创建名片','实名认证','授权认证','认证审核']" :active="1"></Step>
      </div>
      <div class="page-content-bottom">
        <div class="page-content-bottom-title">
          <span class="bottom-text">
            创建招聘名片
          </span>
          <br/>
          <span class="bottom-data">
            向求职者介绍一下自己吧
          </span>
        </div>
        <div class="page-content-bottom-title">
          <div class="page-content-bottom-fill">
            <span class="required" style="margin-left: 30px"></span><span>头像</span>
            <UploadFile style="padding-left: 30px" ref="upload" :imageUrl="form.faceUrl?[form.faceUrl]:[]" :accept="['jpg','jpeg','png']" @uploadSuccess="uploadSuccess" :autoUpload="true"></UploadFile>
          </div>
          <div class="page-content-bottom-fill">
            <span class="required" style="margin-left: 30px">*</span><span>姓名</span>
            <input v-model="form.realName" class="form-ctrl code" maxlength="30" type="text" placeholder="请填写你的真实姓名" />
          </div>
          <div class="page-content-bottom-fill">
            <span class="required"> </span><span>我的公司</span>
            <template>
              <el-select v-model="form.comId" remote filterable placeholder="你当前就职的公司（可输入关键字）" :remote-method="remoteMethod" v-loadmore="loadMore">
                <el-option
                    v-for="item in enterprise"
                    :key="item.id"
                    :label="item.enterpriseName"
                    :value="item.id">
                </el-option>
              </el-select>
              <span style="color: red">(如未搜索到您的公司请填写下方统一社会信用代码)</span>
            </template>
          </div>

          <div class="page-content-bottom-fill">
            <span class="required">*</span><span>信用代码</span>
            <input v-model="form.numId" class="form-ctrl code" maxlength="30" type="text" placeholder="企业统一社会信用代码" />
          </div>
          <div class="page-content-bottom-fill">
            <span class="required">*</span><span>我的职务</span>
            <input v-model="form.comPosition" class="form-ctrl code" maxlength="30" type="text" placeholder="明确的职务，更能赢得求职者的信任" />
          </div>
        </div>
      </div>
        <div class="page-content-confirm" @click="submit">
          下一步
        </div>
    </div>
  </div>
</template>

<script>
import UploadFile from "@/components/Upload/UploadFile";
import Step from "@/components/Step/Step";
import {addComOne, getEnterpriseNamePageApi} from "@/api/enterprise";
import {validate} from "@/utils/validate";
import Vue from 'vue';

/** 自定义指令 */
Vue.directive(
    'loadmore', // 自定义指令
    {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚        动 条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
)
export default {
  components: {UploadFile,Step},
  data() {
    return {
      enterprise:[],
      comListConf:{
        loading:false,
        searchComName:'',
        total:0,
        comPage:1,
      },
      enterpriseLoading:false,
      form:{
        faceUrl:'',
        realName:'',
        comId:'',
        comPosition:'',
        type:'add',
        numId: ''
      },
      rule:{
        realName: {
          name: '姓名',
          required: true
        },
        numId: {
          name: '统一社会信用代码',
          required: true
        },
        comPosition: {
          name: '职务',
          required: true
        }

      }
    }
  },
  watch:{
    "form.comId":function (newVal){

      for (let i = 0; i < this.enterprise.length; i++) {
        if(newVal == this.enterprise[i].id)
        {
          this.form.numId = this.enterprise[i].erterpriseIdNum
        }
      }

      console.log(newVal)
    }
  },


  methods: {
    remoteMethod(query)
    {
      if (query !== '') {
        this.comListConf.searchComName = query;
        this.comListConf.comPage = 1;
        this.comListConf.total = 0;
        this.getEnterprise();
      }
    },
    loadMore() {
      if(this.comListConf.comPage*100<this.comListConf.total){
        this.comListConf.comPage++;
        this.enterpriseLoading=true
        getEnterpriseNamePageApi({comName:this.comListConf.searchComName,page:this.comListConf.comPage,limit:100}).then((res)=>{
          this.enterprise = [...this.enterprise, ...res.list];
        }).finally(()=>{
          this.enterpriseLoading=false
        })

      }

    },

    uploadSuccess(e){
      this.form.faceUrl=e.data;
    },
    getEnterprise()
    {
      this.enterpriseLoading=true
      getEnterpriseNamePageApi({comName:this.comListConf.searchComName,page:this.comListConf.comPage,limit:100}).then((res)=>{
        this.enterprise=res.list??[];
        this.comListConf.total=res.count;
      }).finally(()=>{
        this.enterpriseLoading=false
      })
    },
    submit(){
      if(validate(this.form,this.rule)){
        const loading=this.$loading({text:'提交中'})
        addComOne(this.form).then((res)=>{
          console.log(res)
          if(res==0)
          {
            this.$message.error('请输入正确统一社会信用代码');
          }else {
            this.$message.success('保存成功');
            this.$store.dispatch('user/getUser').finally(()=>{
              this.$router.push({path:'/enterprise/authorization/authentication'})
            });
          }
        }).finally(()=>{
          loading.close()
        })
      }
    }
  },
  mounted() {
    this.getEnterprise()

  }

}
</script>

<style lang="scss" scoped>
.content {

  .page-content{
    background-color: #FFFFFF;
    width: $contentWidth;
    min-height: 780px;
    margin: 20px auto;
    flex-direction: column;
    border-radius: 5px;
    .page-content-top{
      margin: 0 30px 0 30px;
      padding-top: 25px;
      border-bottom:1px solid #DBDBDB;
    }
    .page-content-bottom{

      .page-content-bottom-title{
        margin: 50px 30px 0 30px;
        .page-content-bottom-fill{
          padding-top: 30px;
          display: flex;
          .el-select {
            position: relative;
            display: inline-block;
            height: 40px;
            padding: 0 28px;
            width: 55%;
          }
          .form-ctrl{
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background: none;
          }
          .form-ctrl.code{
            margin-left: 30px;
            width: 50%;
            border: 1px solid #DBDBDB;
            border-radius: 10px;
          }
          .required{
            color: red;
          }
        }
      }
      .bottom-text{
        font-size: 25px;
      }
      .bottom-data{
        font-size: 14px;
        color: #72767b;
      }
    }
    .page-content-confirm{
      margin: 40px 50px 30px 132px;
      border-radius: 10px;
      width: 135px;
      height: 35px;
      background: #ff7626;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
